<template>
	<div class="order_main">
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formOrderSearch" class="orderFormMain " label-width='100px'>
		        <el-form-item label="任务类型">
							<el-select v-model="formOrderSearch.workTypeId" placeholder="全部">
								<el-option
									v-for="item in workTypeSelect"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
		        </el-form-item>
		        <el-form-item label="紧急程度">
							<el-select v-model="formOrderSearch.emergencyDegreeId" placeholder="全部">
								<el-option
									v-for="item in emergencyDegreeSelect"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
							</el-select>
		        </el-form-item>
		        <el-form-item label="创建人">
		          <el-input v-model="formOrderSearch.createUserName" placeholder="创建人"></el-input>
		        </el-form-item>
		        <el-form-item label="处理人">
							<el-input v-model="formOrderSearch.handelUserName" placeholder="处理人"></el-input>
		        </el-form-item>
		        <el-form-item label="联系人">
		          <el-input v-model="formOrderSearch.customerName" placeholder="联系人"></el-input>
		        </el-form-item>

		        <el-form-item label="状态">
		          <el-select v-model="formOrderSearch.WorkOrderState" placeholder="全部">
								<el-option
									v-for="item in WorkOrderStateSelect"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
							</el-select>
		        </el-form-item>

		        <el-form-item label="创建时间">
							<el-date-picker
								v-model="formOrderSearch.createStartTime"
								type="datetime"
								placeholder="开始时间">
							</el-date-picker>
		       
		        	<el-date-picker
								v-model="formOrderSearch.createEndTime"
								type="datetime"
								placeholder="结束时间">
							</el-date-picker>
		        </el-form-item>

		        <el-form-item label="完成时间">
		        	<el-date-picker
								v-model="formOrderSearch.completeStartTime"
								type="datetime"
								placeholder="开始时间">
							</el-date-picker>
		       
		        	<el-date-picker
				        v-model="formOrderSearch.completeEndTime"
								type="datetime"
								placeholder="结束时间">
							</el-date-picker>
		        </el-form-item>

		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
		          
		        </el-form-item>
		    </el-form>
	      <el-table
	        :data="orderallTable"
	        stripe
	        border
	        style="width: 100%" 
					v-loading="loading">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="emergencyDegreeName"
	          label="紧急程度">
	        </el-table-column>
	        <el-table-column
	          prop="workOrderStateName"
	          label="状态">
	        </el-table-column>
	        <el-table-column
	          prop="workerOrderId"
	          label="工单ID">
	        </el-table-column>
	        <el-table-column
	          prop="workTypeName"
	          label="任务类型">
	        </el-table-column>
	        <el-table-column
	          prop="createUserName"
	          label="创建人">
	        </el-table-column>
	        <el-table-column
	          prop="createDate"
	          label="创建时间"
	          min-width='100'>
	        </el-table-column>
	        <el-table-column
	          prop="handleUserName"
	          label="处理人">
	        </el-table-column>
	        <el-table-column
	          prop="handleDate"
	          label="处理时间"
	          min-width='100'>
	        </el-table-column>
	        
	        <el-table-column
	          fixed='right'
	          width="160"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
		           <!--  <el-button
						v-if="scope.row.workOrderState == 6 ? true : false"
		                size="mini"
		                type="success"
		                @click="handlePhone(scope.$index, scope.row)">回访</el-button> -->
		            
		            <el-button
						v-if="(scope.row.workOrderState == 0||scope.row.workOrderState == 1) ? true : false"
		                size="mini"
		                type="primary"
		                @click="handleAllot(scope.$index, scope.row)">分配</el-button>

		            <el-button
						v-if="(scope.row.workOrderState == 2 ||scope.row.workOrderState == 3 || scope.row.workOrderState == 4|| scope.row.workOrderState == 6) ? false : true"
		                size="mini"
		                type="danger"
		                @click="handleClose(scope.$index, scope.row)">关闭</el-button>

					<el-button
		                size="mini"
		                @click="handleLook(scope.$index, scope.row)">查看</el-button>
	            </template>
	        </el-table-column>
					
	      </el-table>

	      
	      <div class="block">
	        <el-pagination
	          @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageRask"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeRask"
		        layout="sizes, prev, pager, next"
		        :total="totalRask">
	        </el-pagination>
	      </div>
	  </div>
		<!-- gm分配gm -->
	    <el-dialog title="分配" :visible.sync="dialogAllot" center width='450px' :close-on-click-modal="false" :show-close="false">
	      <div class="dialogall_ctext">
	        <div class="line_list clearfix line_listeditbox" >
						<span class="line_listtit fl"><i class="clred">*</i>处理人：</span>
						<div class="overh" >
							<el-select v-model="handelUserValue" placeholder="请选择">
							    <el-option
							      v-for="item in handelUser"
							      :key="item.id"
							      :label="item.operationName"
							      :value="item.id">
							    </el-option>
							</el-select>
							<!-- <p class="line_edittips">*该工单只会指派给 #厂家名称# 厂家人员</p> -->
						</div>
					</div>
	      </div>
	      <div slot="footer" class="dialog-footer">
	        <el-button @click="dialogAllot = false">取 消</el-button>
	        <el-button type="primary" @click="trueBtn">确 定</el-button>
	      </div>
	    </el-dialog>
		<!-- gm分配gm -->

		<!-- gm回访gm -->
	    <el-dialog title="回访" :visible.sync="dialogHandle" center width='450px' :close-on-click-modal="false" :show-close="false">
	      <div class="dialogall_ctext">
	        <div class="line_list clearfix line_listeditbox" >
						<span class="line_listtit fl"><i class="clred">*</i>回访描述：</span>
						<div class="overh" >
							<el-input type="textarea" v-model="descHandle"></el-input>
						</div>
					</div>
	      </div>
	      <div slot="footer" class="dialog-footer">
	        <el-button @click="dialogHandle = false">取 消</el-button>
	        <el-button type="primary" @click="trueHandleBtn(workOrderIdNumer)">确 定</el-button>
	      </div>
	    </el-dialog>
			<!-- gm分配gm -->
	</div>
</template>
<script>
	import {
		getWorkOrderList,
		getBusinessPersonnelList,
		workOrderStatus,
		getTaskTypes,
		pxbPhoneCallback,
		workOrderVisit } from '@/api'
    export default {
        data() {
            return {
				workOrderIdNumer:'',//回访使用的orderId
				dialogHandle:false,
				descHandle:'',
				typeNumber:'',
				// workStatusBtn: true, // 分配按钮是否显示
				formOrderSearch: {//查询条件
					workTypeId:'',       //工单类型id
					emergencyDegreeId:'',//紧急程度id
					createUserName:'',   //创建人姓名
					handelUserName:'',   //处理人姓名
					customerName:'',     //联系人员姓名
					WorkOrderState:'',   //处理状态
					createStartTime:'',  //创建时间 开始
					createEndTime:'',    //创建时间 结束
					completeStartTime:'',//完成时间 开始
					completeEndTime:'',  //完成时间 结束
				},
				orderallTableDate: [], // 表格内容（时间戳）
				emergencyDegreeSelect:[],//紧急程度select
				emergencyDegreeSelectAll:[],//添加全部的紧急程度select
				WorkOrderStateSelect:[], //处理状态select
				WorkOrderStateSelectAll:[],//添加全部的处理状态select
				workTypeSelect:[],//任务类型select
				workTypeSelectAll:[],//添加全部的任务类型select
				dialogAllot:false,//分配form弹出框
				handelUser:[],//分配form弹出框-处理人select
				handelUserValue:'',//	分配form弹出框-处理人	
				equipmentIds:'',//设备ids
				loading: true,//加载器
				totalRask: null,// 分页总条数
				pageSizeRask:10, //当前分页一页多少条数
				currentPageRask:1,//当前页数
				workTypeId: '' // 工单id
			};
		},
		created(){
			console.log(this.$route.query.type)
			//取字典下拉信息
			let dictionaryValue = JSON.parse(sessionStorage.getItem('dictionaryValue'));
			dictionaryValue.map((item, index) =>{
				//紧急程度select
				if(item.typeValue == 'emergency_degree'){
					this.emergencyDegreeSelectAll = item.paramParamList;//为了添加全部的字段,复制数组,添加全部的数据
					this.emergencyDegreeSelect = this.emergencyDegreeSelectAll
					this.emergencyDegreeSelect.unshift({paramName: "全部",paramValue: ""})
				}
				//处理状态select
				if(item.typeValue == 'workerorder_status'){
					this.WorkOrderStateSelectAll = item.paramParamList;
					this.WorkOrderStateSelect = this.WorkOrderStateSelectAll
					this.WorkOrderStateSelect.unshift({paramName: "全部",paramValue: ""})
				}
			})
			console.log(this.typeNumber)
			//工单列表查询
			let params = {
				workTypeId: this.formOrderSearch.workTypeId,
				emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
				createUserName: this.formOrderSearch.createUserName,
				handelUserName: this.formOrderSearch.handelUserName,
				customerName: this.formOrderSearch.customerName,
				WorkOrderState: this.formOrderSearch.WorkOrderState,
				createStartTime: '', 
				createEndTime: '',
				completeStartTime: '',
				completeEndTime: '',
				page: this.currentPageRask, //每页显示个数 (默认为10)
				size: this.pageSizeRask,    //当前页数(默认为1)
				type:this.typeNumber                // 类别（1:我创建，2:待处理，0:全部）
			}
			this.workOrderList(params)     //调用查询
			// //任务类型下拉列表（调用任务类型查询接口）
			let params1={
				query: '',
				status: 0,
				page: 1,
				size: 9999
			}
			this.taskTypes(params1);
			let paramsE = {
				equipmentIds: this.equipmentIds
			}
			this.businessPersonnelList(paramsE);//调用可用业务人员查询（工单处理人）
		},
		mounted: function () {
		    this.typeNumber = this.$route.query.type
		    let params = {
				workTypeId: this.formOrderSearch.workTypeId,
				emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
				createUserName: this.formOrderSearch.createUserName,
				handelUserName: this.formOrderSearch.handelUserName,
				customerName: this.formOrderSearch.customerName,
				WorkOrderState: this.formOrderSearch.WorkOrderState,
				createStartTime: '', 
				createEndTime: '',
				completeStartTime: '',
				completeEndTime: '',
				page: this.currentPageRask, //每页显示个数 (默认为10)
				size: this.pageSizeRask,    //当前页数(默认为1)
				type:this.typeNumber                // 类别（1:我创建，2:待处理，0:全部）
			}
			this.workOrderList(params)
		},
    	methods:{
			getDate (item) {
				var date =  new Date(item);
				var y = 1900+date.getYear();
				var m = "0"+(date.getMonth()+1);
				var d = "0"+date.getDate();
				return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length)
			},
			trueBtn(){
				this.dialogAllot = false
				let params ={
					workOrderId: this.workTypeId,
					handelUserId: this.handelUserValue,
					status: 1
				}
				this.workOrderStatus(params)
				let paramsS ={
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: '', 
					createEndTime: '',
					completeStartTime: '',
					completeEndTime: '',
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:this.typeNumber                   // 类别（1:我创建，2:待处理，0:全部）
				}
			    this.workOrderList(paramsS)     //调用查询
			},
			onSubmit(){ //查询按钮  
				let params={
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:this.typeNumber                   // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params)     //调用查询
			},
    		handleAllot(index, row) {//分配按钮
				this.dialogAllot = true//分配form弹出框
				// this.houseId = row.houseId  // 处理人编号
				this.workTypeId = row.workerOrderId // 工单id
				this.equipmentIds = row.equipmentIds // 设备id
	      	},
			handleLook(index, row) {//查看
				this.$router.push({
					path: '/home/orderdetails',
					query: {
						id: row.workerOrderId, // 工单id
						workOrderState: row.workOrderState, //状态
						handleUserName: row.handleUserName, //处理人姓名
						houseId: row.houseId //房屋id
					}
				})
		    },
		    handleClose(index, row) {//关闭
				let params = {
					handelUserId: row.houseId, // 处理人编号
					workOrderId: row.workerOrderId, // 工单id
					status: 4
				}
				this.workOrderStatus(params)
			},
	      	handlePhone(index,row){//回访按钮
	      		console.log(row)
	      		this.workOrderIdNumer =row.workerOrderId
	      		this.dialogHandle=true
	      		let params = {
			  		device: sessionStorage.getItem('device'),
			  		called: row.contactTelephone//列表没有电话号码
			  	}
			  	this.phoneCallback (params)
	      	},
			trueHandleBtn(orderId){//确定添加回访数据---表格中的回访
				let params ={
					workOrderId:orderId,
					desc:this.descHandle
				}
				console.log(params)
				this.workOrderVisit(params)
				this.dialogHandle=false
			},
			phoneCallback (params) { //调入呼出电话接口(立即回拨)
			  	pxbPhoneCallback (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						// this.$router.push({
						// 	path: '/home/oncall',
						// 	query: {
						// 		callPhone: this.callPhone
						// 	}
						// })
						// bus.$emit('hideEvent', true)
						this.$message({
							message: '呼出成功,请填写回访记录'
						})
					}else if(code == 1){
						this.$message({
							message: '分机号错误!'
						})
					}else if(code == 2){
						this.$message({
							message: '被叫号错误!'
						})
					}
					else if(code == 3){
						this.$message({
							message: '呼叫失败!'
						})
					}
					
				});
			},
			workOrderVisit(params){//调用回访接口
				workOrderVisit(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						this.$message({
							message: '添加回访记录成功'
						})
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			workOrderList(params){ //查询接口                 
				getWorkOrderList(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.totalRask = data.pageInfo.total
						this.orderallTableDate = data.list
						this.loading = false
					}else if(code == 1){
						// this.$message({
						// 	message: res.data.msg
						// })
					}
				})
			},
			businessPersonnelList(params){  //可用业务人员查询接口（获取工单处理人下拉列表）
				getBusinessPersonnelList(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.handelUser = data;
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			workOrderStatus(params){    //工单状态修改接口（）
				workOrderStatus(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let params = {
							workTypeId: this.formOrderSearch.workTypeId,
							emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
							createUserName: this.formOrderSearch.createUserName,
							handelUserName: this.formOrderSearch.handelUserName,
							customerName: this.formOrderSearch.customerName,
							WorkOrderState: this.formOrderSearch.WorkOrderState,
							createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
							createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
							completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
							completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
							page: this.currentPageRask, //每页显示个数 (默认为10)
							size: this.pageSizeRask,    //当前页数(默认为1)
							type:this.typeNumber                  // 类别（1:我创建，2:待处理，0:全部）
						}
						this.workOrderList(params)
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			taskTypes(params){ //任务类型查询查询接口（获取任务类型下拉列表）   
				getTaskTypes(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.workTypeSelectAll = data.list;
						this.workTypeSelect = this.workTypeSelectAll //为了添加全部的字段,复制数组,添加全部的数据
						this.workTypeSelect.unshift({desc: "",id: '',name: "全部",status: 0,statusName: "启用"})
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleSizeChange (val) {  //改变每页的条数
				this.pageSizeRask = val;
				this.currentPageRask = 1
				let params={
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: this.formOrderSearch.createStartTime, 
					createEndTime: this.formOrderSearch.createEndTime,
					completeStartTime: this.formOrderSearch.completeStartTime,
					completeEndTime: this.formOrderSearch.completeEndTime,
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:this.typeNumber                 // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params);               //调用查询接口
			},
			handleCurrentChange (val) { //改变当前页 
				this.currentPageRask = val
				let params={
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: this.formOrderSearch.createStartTime, 
					createEndTime: this.formOrderSearch.createEndTime,
					completeStartTime: this.formOrderSearch.completeStartTime,
					completeEndTime: this.formOrderSearch.completeEndTime,
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:this.typeNumber                   // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params);               //调用查询接口
			}
    	},
		computed: {
			orderallTable () {
				return this.orderallTableDate.map(v => {
					return {
						createUserId: v.createUserId,
						contactTelephone:v.contactTelephone,
						contact:v.contact,
						createUserName: v.createUserName,
						emergencyDegreeId: v.emergencyDegreeId,
						emergencyDegreeName: v.emergencyDegreeName,
						equipmentIds: v.equipmentIds,
						handleUserId: v.handleUserId,
						handleUserName: v.handleUserName,
						houseId: v.houseId,
						workOrderState: v.workOrderState,
						workOrderStateName: v.workOrderStateName,
						workTypeId: v.workTypeId,
						workTypeName: v.workTypeName,
						workerOrderId: v.workerOrderId,
						createDate: this.getDate(v.createDate),
					  handleDate: this.getDate(v.handleDate)
					}
				})
			}
		},
		watch: {
		    $route(){
				this.typeNumber = this.$route.query.type
			},
		    typeNumber() {
		        let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: '', 
					createEndTime: '',
					completeStartTime: '',
					completeEndTime: '',
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:this.typeNumber                // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params)
		    },
		}
    };
</script>
<style scoped>
 .order_main{padding-top:10px;}
 .line_listeditbox{line-height:40px;width:100%;}
 .line_edittips{display:block;color:#FA637B;font-size:12px;margin-left:5px;}
 .clred{color:#FA637B;padding-right:2px;font-style:normal;}
</style>